<template>
  <div>
<h2>显示页面</h2>
<table border="1">
  <tr>
    <td>房型昵称</td>
    <td>价格</td>
    <td>人数</td>
    <td>预定时间</td>
    <td>简介</td>
    <td>面积</td>
    <td>状态</td>
    <td>操作</td>
  </tr>
  <tr v-for="item in list">
    <td>{{ item.rname}}</td>
    <td>{{ item.price }}</td>
    <td>{{ item.maxnum }}</td>  
    <td>{{ item.cretatime }}</td>
    <td>{{ item.remark}}</td>
    <td>{{ item.squre}}</td>
    <td>{{ item.stets==1?"空房":"满房" }}</td>
    <td>
      <input type="button" @click="jump(item.id)" value="修改" >
      <input type="button" @click="upd(item.id,item.stets)" value="状态" >
      <input type="button" @click="dele(item.id)" value="删除" >
    </td>
  </tr>
 
</table>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs,onMounted } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter();
let data=reactive({
  state:{
  
  },
  list:[]
})
let {state,list}=toRefs(data)
onMounted(()=>{
  Show()
})
function Show()
{
  axios({
    url:'/api/RoomType/GetRoomtype',
    method:'get',
    
  })
  .then(res=>{
    list.value=res.data.data
    console.log(list.value)
  })
  .catch(err=>{

  })
}
function jump(id:any)
{
  router.push({
    path:'update',
    query:{id:id}
  })
}
const upd=(id:any,stets:any)=>{
  if(stets==1)
{
  stets=0;
}
else
{
  stets=1;
}
let obj={
  id:id,
  state:stets
}
axios({
  url:'/api/RoomType/upda',
  method:'get',
  params:obj
})
.then(res=>{
  if(res.data.data==1)
{
  alert("修改成功")
}
})
.catch(err=>{

})
}
const dele=(id:any)=>{
  if(confirm("确定要删除吗?"))
{
  let obj={
    id:id
  }
  axios({
    url:'/api/RoomType/delete',
    method:'get',
    params:obj
  })
  .then(res=>{
    if(res.data.data==1)
  {
    alert("删除成功")
  }
  else
  {
    alert("删除失败")
  }
  })
  .catch(err=>{

  })
}
}
</script>

<style scoped>

</style>